<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
</head>
<body>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow">
			<div>
				<h4>选项卡</h4>
				<pre>
	&lt;div class="log"&gt;
		&lt;ul class="clearfixer"&gt;
			&lt;li class="active"&gt;选项卡1&lt;/li&gt;
			&lt;li&gt;选项卡2&lt;/li&gt;
			&lt;li&gt;选项卡3&lt;/li&gt;
			&lt;li&gt;选项卡4&lt;/li&gt;
			&lt;li&gt;选项卡5&lt;/li&gt;
			&lt;li&gt;选项卡6&lt;/li&gt;
		&lt;/ul&gt;
		&lt;div class="content bcg"&gt;选项卡1&lt;/div&gt;
		&lt;div class="content"&gt;选项卡2&lt;/div&gt;
		&lt;div class="content"&gt;选项卡3&lt;/div&gt;
		&lt;div class="content"&gt;选项卡4&lt;/div&gt;
		&lt;div class="content"&gt;选项卡5&lt;/div&gt;
		&lt;div class="content"&gt;选项卡6&lt;/div&gt;
	&lt;/div&gt;
	&lt;script type="text/javascript"&gt;
		var lis=document.querySelectorAll("li");
		var con=document.querySelectorAll(".content");
		for(let i=0;i&lt;lis.length;i++){
			lis[i].onclick=function(){
				for(let j=0;j&lt;lis.length;j++){
					lis[j].classList.remove("active");
					con[j].classList.remove("bcg");
				}
				lis[i].classList.add("active");
				con[i].classList.add("bcg");
			}
		}
	&lt;/script&gt;	
	<img src="./img/tab01.jpg" alt="">			
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
</body>

</html>